<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap .clearfix 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <h1>hello world</h1>
    <div class="row">
        <div class="col-xs-6 col-sm-3" style="background-color:lavender;">列1 <br>
            重置窗口大小，查看效果。也尝试删除有clearfix 的div查看效果

        </div>
      
        <div class="col-xs-6 col-sm-3" style="background-color:lavenderblush;">列2</div>
        <div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">列3</div>      </div>  <div class="clearfix visible-xs"></div> <!-- 叫做浮动分割更合适  而不是叫清除浮动-->
        <div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">列4</div>

    </div>
</div>
<div>
        <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu</button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="http://www.baidu.com">一个链接</a>
                        <a href="#"> 另一个链接</a>
                        <a href="#">其他功能</a>
                    </li>
    
                </ul>
</div>


</body>
</html>